<template>
    <block v-if="scene == 1154">
    	<pyq-open-chunk></pyq-open-chunk>
    </block>
    <block v-else>
        <view class="queryPage bg-fff">
            <view class="formContent">
                <up-form :model="form" ref="uForm" labelWidth="auto" :borderBottom="false" label-position="top">
                    <view class="font16 fontBold top-20">
                        基础分数
                    </view>
                    <u-form-item label="1.请选择您的家庭情况" prop="family">
                        <view class="radioGroup">
                            <u-radio-group v-model="form.family" size="17" activeColor="#007235">
                                <block v-for="item in familyList" :key="item.value">
                                    <u-radio :name="item.value" :label="item.name">
                                    </u-radio>
                                </block>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    
                    <u-form-item label="2.请选择您的户籍情况" prop="account">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.account" wrap="true" size="17" activeColor="#007235">
                                <block v-for="item in registerList" :key="item.value">
                                    <u-radio :name="item.value" :label="item.name">
                                    </u-radio>
                                </block>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    
                    <u-form-item label="3.房产情况" prop="house">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.house" wrap="true" size="17" activeColor="#007235">
                                <block v-for="item in hosPropList" :key="item.value">
                                    <u-radio :name="item.value" :label="item.name">
                                    </u-radio>
                                </block>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    
                    <u-form-item label="4.您的五年内购房情况" prop="buy">
                        <view class="radioGroup wrapRadio">
                            <u-radio-group v-model="form.buy" wrap="true" size="17" activeColor="#007235">
                                <block v-for="item in recordList" :key="item.value">
                                    <u-radio :name="item.value" :label="item.name">
                                    </u-radio>
                                </block>
                            </u-radio-group>
                        </view>
                    </u-form-item>
                    
                    <view class="font16 fontBold top-10">
                        社保月数
                    </view>
                    
                    <u-form-item label="请输入2003年1月起累计的社保缴纳月数" prop="coefficient">
                        <view class="radioGroup">
                            <view class="inpItem flex">
                                <text class="tit">缴纳系数</text>
                                <view class="inp">
                                    <input class="uni-input" type="digit" v-model="form.coefficient" placeholder="请输入社保缴纳系数" @input="changeXiShu" />
                                </view>
                            </view>
                        </view>
                    </u-form-item>
                    <u-form-item label=" " prop="month">
                        <view class="radioGroup">
                            <view class="inpItem flex">
                                <text class="tit">社保月数</text>
                                <view class="inp">
                                    <input class="uni-input" type="number" v-model="form.month" placeholder="请输入月数" @input="monthChange" />
                                </view>
                            </view>
                        </view>
                    </u-form-item>
                </up-form>
            </view>
            
            <button class="submitBtn" @click="submit">提交计算</button>

            <share-btn :display="scrollAnimate"></share-btn>

		    <view class="disclaimer left-15 right-15 font12 col-grey top-20">免责声明：以上测算数据仅供参考，部分三类人群不适用此购房积分计算，具体请以政府公示为准</view>

			<up-gap height="40"></up-gap>
        </view>
    </block>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
    import { useConfigStore, useIndexStore, useUserInfoStore } from '@/store/index';
    // import { dispatchClient } from '@/common/api-adviser';
    import { isBoolean } from '@/common/common';
	export default {
        data() {
            return {
                nowarpWidth: "calc(50% - 28rpx)",
                form: {
                    family: '',
                    account: "",
                    house: "",
                    buy: "",
                    coefficient: "0.1",
                    month: ""
                },
                familyList: [
                	{
                		name: '家庭（10分）',
                        value: "10",
                	},
                	{
                		name: '单身（0分）',
                        value: "0",
                	}
                ],
                registerList: [
                    {
                    	name: '上海户口(若是家庭,夫妻双方一方为上海户籍即可)（10分）',
                        value: "10"
                    },{
                    	name: '非上海户口（0分）',
                        value: "0"
                    }
                ],
                hosPropList: [
                    {
                    	name: '上海无房（20分）',
                        value: "20"
                    },{
                    	name: '沪籍家庭且名下住房为1套（5分）',
                        value: "5"
                    },{
                    	name: '其他（0分）',
                        value: "0"
                    }
                ],
                recordList: [
                    {
                    	name: '名下无房且5年内无购房记录（20分）',
                        value: "20"
                    },{
                		name: '沪籍家庭名下有1套住房且5年内无购房记录（5分）',
                        value: "5"
                	},{
                		name: '5年内有购房记录（0分）',
                        value: "0"
                	}
                ],
                rules: {
                    family: [
                    	{
                    		required: true,
                    		message: '请选择家庭情况',
                    		trigger: 'change',
                    	}
                    ],
                    account: [
                        {
                        	required: true,
                        	message: '请选择户籍情况',
                        	trigger: 'change',
                        }
                    ],
                    house: [
                        {
                        	required: true,
                        	message: '请选择房产情况',
                        	trigger: 'change',
                        }
                    ],
                    buy: [
                    	{
                    		required: true,
                    		message: '请选择购房情况',
                    		trigger: 'change',
                    	}
                    ],
                    coefficient: [
                        {
                        	required: true,
                        	message: '请输入社保缴纳系数',
                        	trigger: 'blur' ,
                        }
                    ],
                    month: [
                        {
                        	required: true,
                        	message: '请输入月数且为整数',
                        	trigger: 'blur' ,
                            pattern: '^([0]|[1-9][0-9]*)$'
                        }
                    ]
                },
                scrollAnimate: false,
                productId: '',
                title: '',
                share: false,
                start_time: 0
            }
        },
        onReady() {
            //#ifdef MP-WEIXIN
        	this.$refs.uForm.setRules(this.rules);
            //#endif
        },
        computed:{
        	...mapState(useConfigStore, ['scene']),
            ...mapState(useUserInfoStore, ['userInfo'])
        },
        onLoad(options){
            let { productId='', title='', puid='', share=false } = options;
            const that = this;
            this.productId = productId&&productId!=='undefined'?productId:'';
            this.title = title&&title!=='undefined'?title:'';
            this.share = isBoolean(share);
            this.start_time = (new Date()).getTime();
            
            //朋友圈进入小程序快照场景
            if(this.scene == 1154) return;
          
            if(puid&&puid!=='undefined') {
                this.setPuid(puid)
            }

            uni.$check_and_login(function(){
                //绑定客户
                // dispatchClient({
                //     share: that.share,
                //     puid: puid,
                //     pid: that.productId
                // });
            });
        },

        onPageScroll() {
            const that = this;
            that.scrollAnimate = true;
            this.$u.debounce(function() {
                that.scrollAnimate = false;
            }, 500);
        },
        
		//#ifdef MP-WEIXIN
		onShareTimeline() {
		  return {
			title: '新房认购分数查询',
			imageUrl: 'https://image.srea.org.cn/xcx/share-integral-query-image-sh.jpg',
            query: `productId=${this.productId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=新房认购分数查询-${this.productId}-${this.title}`
		  }
		},
		//#endif

		onShareAppMessage() {
		    return {
		        title: '新房认购分数查询',
		        path: `/pages/tools/integral-query/integral-query?productId=${this.productId}&puid=${this.userInfo.id}&title=${this.title}&share=true&prepage=新房认购分数查询-${this.productId}-${this.title}`
			}
		},
		methods:{
            ...mapActions(useConfigStore, ['setPuid']),
            ...mapActions(useIndexStore, ['setPoints', 'setIntegralInfo']),
            //社保月数
            monthChange(e){
                let value = e.target.value;
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                month = (year - 2003) * 12 + month - 1

                if(value > month) {
                    this.form.month = 0;
                    uni.showToast({
                        icon: "none",
                        title: `不能大于${month}个月哦~`,
                    });
                }
            },
            
            //提交
            submit(){
                const that = this;
                this.$refs.uForm.validate().then(valid => {
                	if (valid) {
                        that.calcIntegral()
                	}
                })
            },
            
            //计算分数
            calcIntegral() {
                let { family, account, house, buy, coefficient, month } = this.form;
                const that = this;
                let basePoints = Number(family)+Number(account)+Number(house)+Number(buy);
                let monthPoints = Number(month) * 0.1 + basePoints;
                let totalPoints = Number(month) * Number(coefficient) + basePoints;
                that.setIntegralInfo({
                    ...this.form,
                    basePoints,
                    monthPoints,
                    totalPoints
                })
                that.setPoints(totalPoints);
                let infoObj = {
                    ...that.form,
                    points: monthPoints,
                    points_show: totalPoints,
                    safe: month,
                    ratio: coefficient
                }
                uni.navigateTo({
                    url: `/pages/tools/integral-query/integral-result?totalPoints=${totalPoints}`
                })
            },
            
            //改变社保系数
            changeXiShu(e) {
                if(e.detail.value > 0.24) {
                    this.form.coefficient = 0;
                    this.$common.msg('社保系数最高0.24');
                }
            }
		}
    }
</script>

<style lang="scss">
    .queryPage{
        min-height: 100vh;
        overflow: hidden;
        .formContent{
            padding-left: 28rpx;
        }
        .u-form-item{
            font-size: 32rpx !important;
            &::after{
                display: none;
                border: none;
            }
        }
        
        .radioGroup{
            font-size: 28rpx;
            .u-radio{
                margin-right: 28rpx;
                padding: 10rpx 20rpx;
                border: 1rpx solid rgba(0,0,0,.05);
                .u-radio__label{
                    width: 100%;
                    margin-left: 30rpx;
                }
            }
            .inpItem{
                justify-content: flex-start;
                .tit{
                    width: 20%;
                }
                .inp{
                    width: calc(80% - 28rpx);
                    border: 1rpx solid rgba(0,0,0,.05);
                }
            }
        }
        .wrapRadio{
            width: calc(100% - 28rpx);
            .u-radio{
                margin-bottom: 28rpx;
            }
        }
        .submitBtn{
            margin: 28rpx;
            background-color: $theme-color;
            color: #FFFFFF;
            &::after{
                border: none;
            }
        }
        .disclaimer{
            line-height: 1.5;
        }
    }
</style>
